<template>
  <div class="catories-page">
    <van-sticky>
      <van-search v-model="search.keyword"
                  shape="round"
                  background="#d41e32"
                  show-action
                  placeholder="请输入搜索关键词"
                  class="home-search"
                  @search="onSearch">
        <template #action>
          <div @click="onSearch"
               class="m-white">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <main class="clearfix">
      <van-sidebar v-model="cateData.activeKey">
        <van-sidebar-item v-for="cate in cateData.catrgories"
                          :title="cate.title"
                          @click="onChange(cate.children)" />
      </van-sidebar>
      <div class="main-content">
        <div class="cate-item"
             v-for="(item,index) in cateData.checkedCate">
          <h5>{{ item.title }}</h5>
          <div class="item-content">
            <van-tag v-for="(subItem,idx) in item.children"
                     :plain="'cate'+index+idx != cateData.checkedCate3.key"
                     size="large"
                     color="#d41e32"
                     @click="checkedCate(subItem,'cate'+index+idx)">{{subItem.title}}</van-tag>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";

import { useRouter } from "vue-router";
import { getCategoriesData } from "/@api/index";
export default {
  name: "Categories",
  setup () {
    const { push } = useRouter();
    const cateData = reactive({
      activeKey: 0,
      catrgories: [],
      checkedCate: {},
      checkedCate3: {
        key: "",
        val: "",
      },
    });

    onMounted(async () => {
      await initCategoriesData(cateData);
    });

    const { search, onSearch } = initHomeSearch();

    const onChange = (val) => {
      cateData.checkedCate = val;
    };

    const checkedCate = (val, idx) => {
      cateData.checkedCate3 = {
        key: idx,
        val: val,
      };
      push(`/search?type2_id=${val.id}`);
      console.log(val);
    };
    return {
      search,
      onSearch,
      onChange,
      cateData,
      checkedCate,
    };
  },
};

// 初始化首页顶部搜索数据及方法
const initHomeSearch = () => {
  const { push } = useRouter();
  const search = reactive({
    keyword: "",
  });
  const onSearch = () => {
    console.log(search.keyword);
    push({ path: "/search", query: search });
  };
  return { search, onSearch };
};

const initCategoriesData = async (cateData) => {
  const { data } = await getCategoriesData();
  cateData.catrgories = JSON.parse(
    JSON.stringify(data.data.typeArr)
      .replace(/type_name/g, "title")
      .replace(/type2Arr/g, "children")
      .replace(/type3Arr/g, "children")
      .replace(/系列/g, "")
      .replace(/系统/g, "")
  );
};
</script>

<style scoped lang="less">
.catories-page {
  height: 100%;
  main {
    .van-sidebar {
      height: 100%;
      float: left;
      background-color: #f7f7f7;
      ::v-deep(.van-sidebar-item) {
        padding: 15px 12px;
      }
    }
    .main-content {
      width: 100%;
      height: 100%;
      padding-left: 90px;
      padding-right: 10px;
      box-sizing: border-box;
      .cate-item {
        margin: 10px 0;
        padding: 10px;
        padding-bottom: 5px;
        border-radius: 10px;
        background-color: #f7f7f7;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        h5 {
          margin-bottom: 8px;
        }
        .van-tag {
          margin-right: 6px;
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
